```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高保真原型设计 - 纪念时刻</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #6366F1;
            --primary-dark: #4F46E5;
            --secondary: #EC4899;
            --accent: #F59E0B;
            --text-primary: #1F2937;
            --text-secondary: #6B7280;
            --bg-light: #F9FAFB;
            --bg-muted: #F3F4F6;
        }
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: var(--text-primary);
            background-color: #fff;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        }
        .shadow-soft {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .tab-active {
            border-bottom: 3px solid var(--primary);
            color: var(--primary);
            font-weight: 500;
        }
        .iphone-frame {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="310" height="630" viewBox="0 0 310 630"><rect x="5" y="5" width="300" height="620" rx="40" fill="%23F3F4F6" stroke="%231F2937" stroke-width="2"/><rect x="25" y="20" width="260" height="590" rx="5" fill="%23FFFFFF"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            width: 310px;
            height: 630px;
            position: relative;
        }
        .iphone-screen {
            position: absolute;
            top: 40px;
            left: 25px;
            width: 260px;
            height: 560px;
            overflow: hidden;
            background-color: #fff;
        }
        .ios-status-bar {
            height: 20px;
            display: flex;
            justify-content: space-between;
            padding: 0 12px;
            font-size: 12px;
            color: #000;
            background-color: rgba(0,0,0,0);
            position: relative;
            z-index: 10;
        }
        .ios-bottom-bar {
            height: 80px;
            background-color: #fff;
            border-top: 1px solid #E5E7EB;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .tab-button {
            width: 50px;
            height: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 10px;
        }
        .tab-button.active {
            color: var(--primary);
        }
        .tab-button i {
            font-size: 20px;
            margin-bottom: 4px;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: var(--secondary);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
        }
        .progress-ring {
            transform: rotate(-90deg);
        }
        .progress-ring-circle {
            transition: stroke-dashoffset 0.35s;
            stroke-linecap: round;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">纪念时刻</h1>
                    <p class="text-xl md:text-2xl mb-8 opacity-90">记录生命中最珍贵的倒计时<br>让每一天都更有意义</p>
                    <div class="flex space-x-4">
                        <button class="bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition">立即体验</button>
                        <button class="border-2 border-white px-6 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition">了解更多</button>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="iphone-frame shadow-2xl">
                        <div class="iphone-screen">
                            <div class="ios-status-bar">
                                <span>9:41</span>
                                <span><i class="fas fa-signal"></i> 5G <i class="fas fa-wifi ml-1"></i> <i class="fas fa-battery-three-quarters ml-1"></i></span>
                            </div>
                            <div class="h-full flex flex-col">
                                <div class="flex-1 overflow-y-auto p-4">
                                    <div class="flex items-center justify-between mb-6">
                                        <h2 class="text-xl font-bold">我的纪念日</h2>
                                        <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                                            <i class="fas fa-plus text-gray-600"></i>
                                        </button>
                                    </div>
                                    
                                    <div class="space-y-4">
                                        <div class="bg-pink-50 rounded-xl p-4 relative overflow-hidden">
                                            <div class="absolute top-0 right-0 w-24 h-24 bg-pink-100 rounded-bl-xl opacity-50"></div>
                                            <div class="relative z-10">
                                                <div class="flex items-center justify-between mb-2">
                                                    <h3 class="font-medium">结婚纪念日</h3>
                                                    <span class="text-xs bg-pink-200 text-pink-800 px-2 py-1 rounded-full">重要</span>
                                                </div>
                                                <div class="text-sm text-gray-600 mb-3">5月20日 · 每年重复</div>
                                                <div class="flex items-center">
                                                    <div class="mr-4">
                                                        <div class="text-2xl font-bold">28</div>
                                                        <div class="text-xs text-gray-500">剩余天数</div>
                                                    </div>
                                                    <div class="flex-1">
                                                        <div class="text-xs text-gray-500 mb-1">总天数: 365</div>
                                                        <div class="h-1 bg-gray-200 rounded-full overflow-hidden">
                                                            <div class="h-full bg-pink-500" style="width: 92%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="bg-blue-50 rounded-xl p-4 relative overflow-hidden">
                                            <div class="absolute top-0 right-0 w-24 h-24 bg-blue-100 rounded-bl-xl opacity-50"></div>
                                            <div class="relative z-10">
                                                <div class="flex items-center justify-between mb-2">
                                                    <h3 class="font-medium">宝宝生日</h3>
                                                    <span class="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded-full">家庭</span>
                                                </div>
                                                <div class="text-sm text-gray-600 mb-3">10月15日 · 每年重复</div>
                                                <div class="flex items-center">
                                                    <div class="mr-4">
                                                        <div class="text-2xl font-bold">156</div>
                                                        <div class="text-xs text-gray-500">剩余天数</div>
                                                    </div>
                                                    <div class="flex-1">
                                                        <div class="text-xs text-gray-500 mb-1">总天数: 365</div>
                                                        <div class="h-1 bg-gray-200 rounded-full overflow-hidden">
                                                            <div class="h-full bg-blue-500" style="width: 57%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="bg-purple-50 rounded-xl p-4 relative overflow-hidden">
                                            <div class="absolute top-0 right-0 w-24 h-24 bg-purple-100 rounded-bl-xl opacity-50"></div>
                                            <div class="relative z-10">
                                                <div class="flex items-center justify-between mb-2">
                                                    <h3 class="font-medium">项目截止日</h3>
                                                    <span class="text-xs bg-purple-200 text-purple-800 px-2 py-1 rounded-full">工作</span>
                                                </div>
                                                <div class="text-sm text-gray-600 mb-3">2023年12月31日 · 一次性</div>
                                                <div class="flex items-center">
                                                    <div class="mr-4">
                                                        <div class="text-2xl font-bold">83</div>
                                                        <div class="text-xs text-gray-500">剩余天数</div>
                                                    </div>
                                                    <div class="flex-1">
                                                        <div class="text-xs text-gray-500 mb-1">总天数: 120</div>
                                                        <div class="h-1 bg-gray-200 rounded-full overflow-hidden">
                                                            <div class="h-full bg-purple-500" style="width: 31%"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ios-bottom-bar">
                                    <a href="#" class="tab-button active">
                                        <i class="fas fa-home"></i>
                                        <span>首页</span>
                                    </a>
                                    <a href="#" class="tab-button">
                                        <i class="far fa-calendar"></i>
                                        <span>日历</span>
                                    </a>
                                    <a href="#" class="tab-button relative">
                                        <i class="far fa-bell"></i>
                                        <span>提醒</span>
                                        <div class="notification-badge">3</div>
                                    </a>
                                    <a href="#" class="tab-button">
                                        <i class="far fa-user"></i>
                                        <span>我的</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="py-20 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 font-serif">为什么选择纪念时刻?</h2>
            
            <div class="grid md:grid-cols-3 gap-10">
                <div class="card-hover bg-white p-8 rounded-xl shadow-soft">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-heart text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">情感连接</h3>
                    <p class="text-gray-600">通过精美的视觉设计和情感化的提醒方式，让每一个特殊日子都充满期待和仪式感。</p>
                </div>
                
                <div class="card-hover bg-white p-8 rounded-xl shadow-soft">
                    <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-sliders-h text-pink-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">个性化定制</h3>
                    <p class="text-gray-600">支持多种纪念日类型、自定义提醒方式和视觉主题，打造属于你的专属倒计时体验。</p>
                </div>
                
                <div class="card-hover bg-white p-8 rounded-xl shadow-soft">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-share-alt text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">社交分享</h3>
                    <p class="text-gray-600">一键分享你的重要日子给亲朋好友，让他们一起参与你的期待和喜悦。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Design System Section -->
    <div class="py-20 px-4 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 font-serif">设计系统解析</h2>
            
            <div class="grid md:grid-cols-2 gap-10 mb-16">
                <div>
                    <h3 class="text-xl font-bold mb-6 border-b pb-2">色彩系统</h3>
                    <div class="grid grid-cols-5 gap-4">
                        <div>
                            <div class="w-full h-16 bg-indigo-600 rounded mb-2"></div>
                            <div class="text-xs text-center">主色 #6366F1</div>
                        </div>
                        <div>
                            <div class="w-full h-16 bg-pink-500 rounded mb-2"></div>
                            <div class="text-xs text-center">辅助色 #EC4899</div>
                        </div>
                        <div>
                            <div class="w-full h-16 bg-yellow-500 rounded mb-2"></div>
                            <div class="text-xs text-center">强调色 #F59E0B</div>
                        </div>
                        <div>
                            <div class="w-full h-16 bg-gray-800 rounded mb-2"></div>
                            <div class="text-xs text-center">文字 #1F2937</div>
                        </div>
                        <div>
                            <div class="w-full h-16 bg-gray-400 rounded mb-2"></div>
                            <div class="text-xs text-center">次要 #6B7280</div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6 border-b pb-2">排版系统</h3>
                    <div class="space-y-4">
                        <div>
                            <p class="text-xs text-gray-500 mb-1">标题 / Noto Serif SC / 700</p>
                            <h4 class="text-2xl font-serif font-bold">优雅的衬线字体</h4>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">正文 / Noto Sans SC / 400</p>
                            <p class="">清晰易读的无衬线字体，提供舒适的阅读体验</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500 mb-1">强调文字 / Noto Sans SC / 500</p>
                            <p class="font-medium">通过字重变化突出重要内容</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <h3 class="text-xl font-bold mb-6 border-b pb-2">组件展示</h3>
            <div class="grid md:grid-cols-3 gap-6">
                <div>
                    <p class="text-sm text-gray-600 mb-3">按钮</p>
                    <div class="space-y-4">
                        <button class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition">主要按钮</button>
                        <button class="w-full border border-indigo-600 text-indigo-600 py-2 px-4 rounded-lg hover:bg-indigo-50 transition">次要按钮</button>
                        <button class="w-full bg-white text-gray-700 py-2 px-4 rounded-lg shadow hover:bg-gray-50 transition">普通按钮</button>
                    </div>
                </div>
                
                <div>
                    <p class="text-sm text-gray-600 mb-3">卡片</p>
                    <div class="bg-white p-4 rounded-xl shadow-soft">
                        <div class="flex items-center mb-3">
                            <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-calendar text-indigo-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">纪念日卡片</h4>
                                <p class="text-xs text-gray-500">5月20日 · 结婚纪念日</p>
                            </div>
                        </div>
                        <div class="h-2 bg-gray-200 rounded-full overflow-hidden mb-2">
                            <div class="h-full bg-pink-500" style="width: 75%"></div>
                        </div>
                        <div class="flex justify-between text-xs text-gray-500">
                            <span>25天</span>
                            <span>剩余</span>
                            <span>100天</span>
                        </div>
                    </div>
                </div>
                
                <div>
                    <p class="text-sm text-gray-600 mb-3">表单元素</p>
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">纪念日名称</label>
                            <input type="text" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                        </div>
                        <div>
                            <label class="block text-sm text-gray-600 mb-1">日期选择</label>
                            <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                                <option>选择日期</option>
                                <option>5月20日</option>
                                <option>10月1日</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- User Flow Section -->
    <div class="py-20 px-4 bg-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 font-serif">用户旅程分析</h2>
            
            <div class="bg-gray-50 p-6 rounded-xl">
                <div class="mermaid">
                    flowchart TD
                        A[启动应用] --> B{已登录?}
                        B -->|是| C[显示主界面]
                        B -->|否| D[登录/注册流程]
                        C --> E[浏览纪念日列表]
                        E --> F[查看纪念日详情]
                        F --> G[编辑纪念日]
                        F --> H[分享纪念日]
                        E --> I[添加新纪念日]
                        I --> J[设置名称/日期]
                        J --> K[选择分类/标签]
                        K --> L[设置提醒]
                        L --> M[保存完成]
                </div>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8 mt-16">
                <div class="bg-indigo-50 p-6 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-exclamation-circle text-indigo-600 mr-2"></i>
                        核心痛点 #1
                    </h3>
                    <p class="font-medium mb-2">用户容易忘记重要纪念日</p>
                    <p class="text-gray-600 text-sm">解决方案：提供多层次提醒系统，包括推送通知、邮件提醒和可视化倒计时卡片，让用户随时掌握重要日子的临近。</p>
                </div>
                
                <div class="bg-pink-50 p-6 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-exclamation-circle text-pink-600 mr-2"></i>
                        核心痛点 #2
                    </h3>
                    <p class="font-medium mb-2">传统日历应用缺乏情感连接</p>
                    <p class="text-gray-600 text-sm">解决方案：通过精美的视觉设计、情感化的交互方式和个性化定制选项，让每个纪念日都成为独特的情感体验。</p>
                </div>
                
                <div class="bg-purple-50 p-6 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fas fa-exclamation-circle text-purple-600 mr-2"></i>
                        核心痛点 #3
                    </h3>
                    <p class="font-medium mb-2">纪念日管理杂乱无章</p>
                    <p class="text-gray-600 text-sm">解决方案：引入智能分类系统和多维度筛选功能，帮助用户轻松管理各种类型的纪念日，无论是家庭、工作还是个人事项。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Prototype Showcase -->
    <div class="py-20 px-4 bg-gray-900 text-white">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-6 font-serif">交互原型展示</h2>
            <p class="text-center text-gray-300 mb-16 max-w-2xl mx-auto">体验流畅的交互流程和精心设计的界面细节，感受纪念时刻带来的愉悦体验。</p>
            
            <div class="grid md:grid-cols-2 gap-10 items-center">
                <div>
                    <h3 class="text-xl font-bold mb-4">添加纪念日流程</h3>
                    <p class="text-gray-300 mb-6">通过简洁的表单和智能建议，让添加新纪念日变得轻松愉快。系统会自动推荐可能的日期和分类，减少用户输入负担。</p>
                    
                    <div class="flex space-x-4">
                        <div class="iphone-frame">
                            <div class="iphone-screen">
                                <div class="ios-status-bar text-black">
                                    <span>9:41</span>
                                    <span><i class="fas fa-signal"></i> 5G <i class="fas fa-wifi ml-1"></i> <i class="fas fa-battery-three-quarters ml-1"></i></span>
                                </div>
                                <div class="h-full flex flex-col">
                                    <div class="flex-1 p-4 overflow-y-auto">
                                        <div class="flex items-center justify-between mb-6">
                                            <h2 class="text-xl font-bold">添加纪念日</h2>
                                            <button class="text-gray-400">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        
                                        <div class="space-y-5">
                                            <div>
                                                <label class="block text-sm text-gray-500 mb-1">纪念日名称</label>
                                                <input type="text" placeholder="例如: 结婚纪念日" class="w-full bg-gray-100 border-0 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500">
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm text-gray-500 mb-1">日期</label>
                                                <div class="relative">
                                                    <input type="text" placeholder="选择日期" class="w-full bg-gray-100 border-0 rounded-lg px-3 py-2 pr-8 focus:ring-2 focus:ring-indigo-500">
                                                    <i class="fas fa-calendar absolute right-3 top-2.5 text-gray-400"></i>
                                                </div>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm text-gray-500 mb-1">分类</label>
                                                <div class="grid grid-cols-3 gap-2">
                                                    <button class="bg-indigo-100 text-indigo-800 py-2 rounded-lg text-sm">重要</button>
                                                    <button class="bg-gray-100 text-gray-800 py-2 rounded-lg text-sm">家庭</button>
                                                    <button class="bg-gray-100 text-gray-800 py-2 rounded-lg text-sm">工作</button>
                                                </div>
                                            </div>
                                            
                                            <div>
                                                <label class="block text-sm text-gray-500 mb-1">提醒</label>
                                                <div class="space-y-2">
                                                    <div class="flex items-center">
                                                        <input type="checkbox" class="rounded text-indigo-600" checked>
                                                        <span class="ml-2 text-sm">提前1天</span>
                                                    </div>
                                                    <div class="flex items-center">
                                                        <input type="checkbox" class="rounded text-indigo-600">
                                                        <span class="ml-2 text-sm">提前1周</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ios-bottom-bar">
                                        <button class="w-full bg-indigo-600 text-white py-3 mx-4 rounded-lg">保存纪念日</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="iphone-frame">
                            <div class="iphone-screen">
                                <div class="ios-status-bar text-black">
                                    <span>9:41</span>
                                    <span><i class="fas fa-signal"></i> 5G <i class="fas fa-wifi ml-1"></i> <i class="fas fa-battery-three-quarters ml-1"></i></span>
                                </div>
                                <div class="h-full flex flex-col">
                                    <div class="flex-1 p-4 overflow-y-auto flex items-center justify-center">
                                        <div class="text-center">
                                            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                                <i class="fas fa-check text-green-600 text-2xl"></i>
                                            </div>
                                            <h3 class="text-xl font-bold mb-2">添加成功!</h3>
                                            <p class="text-gray-600 mb-6">"结婚纪念日"已添加到你的纪念日列表</p>
                                            <button class="bg-indigo-600 text-white px-6 py-2 rounded-lg">查看详情</button>
                                        </div>
                                    </div>
                                    <div class="ios-bottom-bar">
                                        <button class="w-full bg-white text-indigo-600 py-3 mx-4 rounded-lg border border-indigo-600">完成</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-4">纪念日详情与分享</h3>
                    <p class="text-gray-300 mb-6">精心设计的详情页面展示所有相关信息，并提供多种分享方式，让用户可以与亲友分享重要日子的喜悦。</p>
                    
                    <div class="flex space-x-4">
                        <div class="iphone-frame">
                            <div class="iphone-screen">
                                <div class="ios-status-bar text-black">
                                    <span>9:41</span>
                                    <span><i class="fas fa-signal"></i> 5G <i class="fas fa-wifi ml-1"></i> <i class="fas fa-battery-three-quarters ml-1"></i></span>
                                </div>
                                <div class="h-full flex flex-col">
                                    <div class="flex-1 overflow-y-auto">
                                        <div class="h-40 bg-pink-100 relative overflow-hidden">
                                            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-30"></div>
                                            <div class="absolute bottom-4 left-4">
                                                <h2 class="text-xl font-bold text-white">结婚纪念日</h2>
                                                <div class="text-white">5月20日 · 重要</div>
                                            </div>
                                            <button class="absolute top-4 right-4 w-8 h-8 bg-black bg-opacity-30 rounded-full flex items-center justify-center">
                                                <i class="fas fa-ellipsis-h text-white"></i>
                                            </button>
                                        </div>
                                        
                                        <div class="p-4">
                                            <div class="flex justify-between items-center mb-6">
                                                <div>
                                                    <div class="text-3xl font-bold">28</div>
                                                    <div class="text-sm text-gray-500">剩余天数</div>
                                                </div>
                                                <div class="w-20 h-20">
                                                    <svg class="progress-ring w-full h-full" viewBox="0 0 80 80">
                                                        <circle class="progress-ring-circle stroke-gray-200" stroke-width="6" fill="transparent" r="35" cx="40" cy="40"></circle>
                                                        <circle class="progress-ring-circle stroke-pink-500" stroke-width="6" stroke-dasharray="220" stroke-dashoffset="17.6" fill="transparent" r="35" cx="40" cy="40"></circle>
                                                        <text x="40" y="43" text-anchor="middle" font-size="14" fill="#4F46E5" font-weight="bold">92%</text>
                                                    </svg>
                                                </div>
                                            </div>
                                            
                                            <div class="space-y-4">
                                                <div>
                                                    <h4 class="font-medium mb-1">基本信息</h4>
                                                    <div class="text-sm text-gray-600">
                                                        <div class="flex py-2 border-b border-gray-100">
                                                            <span class="w-20 text-gray-500">日期</span>
                                                            <span>2023年5月20日</span>
                                                        </div>
                                                        <div class="flex py-2 border-b border-gray-100">
                                                            <span class="w-20 text-gray-500">重复</span>
                                                            <span>每年</span>
                                                        </div>
                                                        <div class="flex py-2">
                                                            <span class="w-20 text-gray-500">创建于</span>
                                                            <span>2022年6月15日</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div>
                                                    <h4 class="font-medium mb-1">提醒设置</h4>
                                                    <div class="text-sm text-gray-600">
                                                        <div class="flex items-center py-2 border-b border-gray-100">
                                                            <i class="fas fa-bell text-pink-500 mr-3"></i>
                                                            <span>提前1天提醒</span>
                                                        </div>
                                                        <div class="flex items-center py-2">
                                                            <i class="fas fa-bell text-pink-500 mr-3"></i>
                                                            <span>当天早上9点提醒</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ios-bottom-bar">
                                        <button class="w-full bg-pink-500 text-white py-3 mx-4 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-share-alt mr-2"></i>
                                            <span>分享纪念日</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="iphone-frame">
                            <div class="iphone-screen">
                                <div class="ios-status-bar text-black">
                                    <span>9:41</span>
                                    <span><i class="fas fa-signal"></i> 5G <i class="fas fa-wifi ml-1"></i> <i class="fas fa-battery-three-quarters ml-1"></i></span>
                                </div>
                                <div class="h-full flex flex-col">
                                    <div class="flex-1 p-4 overflow-y-auto flex items-center justify-center">
                                        <div class="text-center">
                                            <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                                <i class="fas fa-share-alt text-pink-600 text-2xl"></i>
                                            </div>
                                            <h3 class="text-xl font-bold mb-4">分享纪念日</h3>
                                            <div class="grid grid-cols-4 gap-4 mb-6">
                                                <button class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
                                                    <i class="fab fa-weixin text-blue-600 text-xl"></i>
                                                </button>
                                                <button class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                                                    <i class="fab fa-weibo text-green-600 text-xl"></i>
                                                </button>
                                                <button class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                                                    <i class="fas fa-envelope text-red-600 text-xl"></i>
                                                </button>
                                                <button class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
                                                    <i class="fas fa-link text-purple-600 text-xl"></i>
                                                </button>
                                            </div>
                                            <p class="text-sm text-gray-600 mb-4">或者复制链接分享给朋友:</p>
                                            <div class="flex">
                                                <input type="text" value="https://jinian.com/share/abc123" class="flex-1 border border-gray-300 rounded-l-lg px-3 py-2 text-sm truncate">
                                                <button class="bg-indigo-600 text-white px-3 rounded-r-lg">
                                                    <i class="fas fa-copy"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ios-bottom-bar">
                                        <button class="w-full bg-gray-100 text-gray-800 py-3 mx-4 rounded-lg">取消</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Final CTA -->
    <div class="py-20 px-4 bg-indigo-50">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="text-3xl font-bold mb-6 font-serif">准备好记录你的重要时刻了吗?</h2>
            <p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">让纪念时刻帮你记住每一个值得期待的特别日子，不错过生命中的每一个重要时刻。</p>
            <button class="bg-indigo-600 text-white px-8 py-4 rounded-lg font-medium hover:bg-indigo-700 transition">立即免费试用</button>
        </div>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Simple tab functionality for prototype showcase
        document.addEventListener('DOMContentLoaded', function() {
            // Progress ring animation
            const progressRing = document.querySelector('.progress-ring-circle');
            if (progressRing) {
                const radius = progressRing.r.baseVal.value;
                const circumference = 2 * Math.PI * radius;
                progressRing.style.strokeDasharray = `${circumference}`;
                progressRing.style.strokeDashoffset = `${circumference * 0.08}`; // 92% progress
            }
        });
    </script>
</body>
</html>
```